<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UserManager } from '@/utils/userManager'

const router = useRouter()
const activeMenu = ref('溯源管理')

// 用户信息
const userData = ref<any>(null)

// 计算属性：用户名
const username = computed(() => {
  if (userData.value && userData.value.username) {
    return userData.value.username
  }
  return '访客'
})

// 计算属性：真实姓名
const realName = computed(() => {
  if (userData.value && userData.value.realName) {
    return userData.value.realName
  }
  return userData.value?.username || '访客'
})

// 计算属性：用户角色
const userRole = computed(() => {
  if (userData.value && userData.value.role) {
    return userData.value.role
  }
  if (userData.value && userData.value.userType) {
    return userData.value.userType
  }
  return '普通用户'
})

// 计算属性：头像显示文字
const avatarText = computed(() => {
  const name = realName.value
  if (name && name !== '访客') {
    return name.charAt(0).toUpperCase()
  }
  return username.value.charAt(0).toUpperCase()
})

// 加载用户信息（如果有）
const loadUserData = () => {
  console.log('尝试加载用户信息...');

  // 使用 UserManager 获取用户信息
  const userInfo = UserManager.getUserInfo();
  if (userInfo) {
    userData.value = userInfo;
    console.log('已加载用户信息:', userData.value);
  } else {
    console.log('未找到用户信息，以访客身份浏览');
    userData.value = null;
  }
}

// 查看个人信息
const viewProfile = () => {
  ElMessage.info('个人信息功能开发中...')
}

// 打开设置
const openSettings = () => {
  ElMessage.info('设置功能开发中...')
}

// 退出登录
const logout = () => {
  // 使用 UserManager 清除用户信息
  UserManager.clearUserInfo();

  // 清除记住密码相关信息
  localStorage.removeItem('rememberedUsername');
  localStorage.removeItem('rememberedPassword');

  userData.value = null;
  ElMessage.success('已退出登录')
  router.push('/login')
}

onMounted(() => {
  console.log('Main组件挂载');
  loadUserData();
})
</script>

<template>
  <div class="main-layout">
    <!-- 顶部导航栏 -->
    <header class="main-header">
      <div class="logo">追溯系统</div>
      <div class="nav-menu">
        <div class="nav-item active">企业管理</div>
        <div class="nav-item">平台运营</div>
        <div class="nav-item">系统设置</div>
      </div>
      <div class="user-info">
        <span class="search-icon">🔍</span>
        <div class="user-dropdown">
          <div class="user-avatar-section">
            <div class="avatar-container">
              <span class="avatar">{{ avatarText }}</span>
              <div class="online-indicator"></div>
            </div>
            <div class="user-text">
              <div class="user-name">{{ realName }}</div>
              <div class="user-role">{{ userRole }}</div>
            </div>
          </div>
          <div class="dropdown-content">
            <!-- 用户信息头部 -->
            <div class="dropdown-header">
              <div class="header-avatar">{{ avatarText }}</div>
              <div class="header-info">
                <div class="header-name">{{ realName }}</div>
                <div class="header-username">@{{ username }}</div>
                <div class="header-role">{{ userRole }}</div>
              </div>
            </div>

            <!-- 分割线 -->
            <div class="dropdown-divider"></div>

            <!-- 菜单项 -->
            <div class="dropdown-item" @click="viewProfile">
              <span class="dropdown-icon">👤</span>
              <span>个人信息</span>
            </div>
            <div class="dropdown-item" @click="openSettings">
              <span class="dropdown-icon">⚙️</span>
              <span>设置</span>
            </div>

            <!-- 分割线 -->
            <div class="dropdown-divider"></div>

            <div class="dropdown-item logout-item" @click="logout">
              <span class="dropdown-icon">🚪</span>
              <span>退出登录</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧菜单 -->
      <aside class="side-menu">
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === '溯源管理' }"
          @click="activeMenu = '溯源管理'"
        >
          <span class="menu-icon">📋</span>
          <span>溯源管理</span>
          <RouterLink to="/ProductionInfo" class="menu-link"></RouterLink>
        </div>
      
      </aside>

      <!-- 右侧内容 -->
      <main class="content">
        <RouterView />
      </main>
    </div>
  </div>
</template>

<style scoped>

.main-layout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #f5f7f9;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-header {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #2c3e50;
  color: white;
  box-sizing: border-box;
  z-index: 10;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  margin-right: 40px;
}

.nav-menu {
  display: flex;
  flex: 1;
}

.nav-item {
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}

.nav-item.active {
  background-color: #1890ff;
}

.user-info {
  display: flex;
  align-items: center;
}

.search-icon {
  margin-right: 20px;
  font-size: 18px;
  cursor: pointer;
}

.user-dropdown {
  position: relative;
  display: inline-block;
}

.user-avatar-section {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.user-avatar-section:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.avatar-container {
  position: relative;
  margin-right: 8px;
  flex-shrink: 0;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #52c41a;
  border: 2px solid white;
  border-radius: 50%;
}

.user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-bottom: 2px;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  background-color: white;
  min-width: 280px;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);
  z-index: 1000;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
}

.user-dropdown:hover .dropdown-content {
  display: block;
}

/* 下拉菜单头部 */
.dropdown-header {
  padding: 16px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
}

.header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.header-username {
  font-size: 13px;
  color: #909399;
  margin-bottom: 2px;
}

.header-role {
  font-size: 12px;
  color: #1890ff;
  background-color: #e6f7ff;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  width: fit-content;
}

/* 分割线 */
.dropdown-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 0;
}

/* 菜单项 */
.dropdown-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f5f7fa;
  color: #303133;
}

.dropdown-item.logout-item {
  color: #f56c6c;
}

.dropdown-item.logout-item:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}

.dropdown-icon {
  margin-right: 10px;
  font-size: 16px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 60px);
}

.side-menu {
  width: 200px;
  background-color: white;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
}

.menu-item:hover {
  background-color: #f0f5ff;
}

.menu-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
}

.menu-icon {
  margin-right: 10px;
}

.menu-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-text {
    display: none;
  }

  .dropdown-content {
    min-width: 260px;
    right: -10px;
  }

  .header-info {
    font-size: 14px;
  }

  .header-name {
    font-size: 15px;
  }

  .nav-menu {
    display: none;
  }

  .logo {
    margin-right: 20px;
  }
}

@media (max-width: 480px) {
  .main-header {
    padding: 0 10px;
  }

  .dropdown-content {
    min-width: 240px;
    right: -20px;
  }

  .search-icon {
    margin-right: 10px;
  }
}
</style>
